<template>
  <el-card ref="container" class="suspend-card">
    <div style="width:100%;font-weight: bolder;font-size: 18px;text-align: center;margin-bottom: 22px;">
      表项模板候选
    </div>
    <el-row v-for="(item,index) in editTemplatesStatus.templates" :key="index" type="flex" class="item-row">
      <el-col :span="24" style="text-align:center;width:100%;">{{ item.name|getName }}</el-col>
      <el-col :span="24">
        <el-row type="flex" style="flex-wrap: wrap;text-align: center;margin-top:8px;">
          <el-col :span="12">
            <el-button size="mini" type="text" style="font-size: 14px;" icon="el-icon-circle-plus"
                       :disabled="editTemplatesStatus.chosenTemplates.some((chosen)=>{return chosen.oid===item.oid})"
                       @click="appendTemplate(item)">添加
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button size="mini" type="text" style="font-size: 14px;" icon="el-icon-view" @click="handleView(item)">
              查看
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div v-if="dialogVisible">
      <el-dialog
        title="表单项预览"
        :visible.sync="dialogVisible"
        width="90%"
      >
        <div v-if="viewData !== null && viewData.json==null">
          <custom-question-block :question-block="viewData"/>
        </div>
        <div v-else-if="viewData !== null && viewData.hasOwnProperty('json')">
          <v-form-render :form-json="getClearFormJson(viewData.json)">
          </v-form-render>
        </div>

        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>/**
 * @Date: 2022/3/24
 */
import CustomQuestionBlock from '@/components/CustomQuestionBlock'
import {getClearFormJson} from "@/utils/common";
import hardCode from "@/utils/templates";

export default {
  name: 'SuspendSideBar',
  components: {CustomQuestionBlock},
  data() {
    return {
      dialogVisible: false,
      viewData: null,
      parseJson: null
    }
  },
  computed: {
    editTemplatesStatus() {
      return this.$store.getters.editTemplates
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
    this.$store.dispatch('app/resetTemplates')
  },
  filters: {
    getName(value) {
      //判断name是不是q开头—加数字
      if (value.startsWith('q')) {
        return hardCode.find((item) => `q${item.id}` === value).name
      } else {
        return value
      }
    }
  },
  methods: {
    getClearFormJson(json) {
      return getClearFormJson(json);
    },
    print(x) {
      console.log(x)
    },
    appendTemplate(id) {
      this.$store.dispatch('app/appendTemplates', id)
    },
    handleView(item) {
      this.viewData = item
      this.dialogVisible = true
    },
    handleScroll() {
      const parent = this.$refs.container.$parent.$parent.$el
      const tail = document.getElementById('editTemplateTail')
      const clientHeight = document.body.clientHeight
      const container = this.$refs.container.$el
      const padding = (clientHeight - container.clientHeight) / 2
      const rect = parent.getBoundingClientRect()
      if (!(tail.getBoundingClientRect().top > padding + container.clientHeight)) {
        return
      } else if (rect.top <= padding) {
        container.style.top = `${-rect.top + padding}px`
      } else {
        container.style.top = `${0}px`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.suspend-card {
  transition: all .8s ease;
  position: relative;
  width: 100%;
  height: 600px;
  overflow: auto;
}

.item-row {
  flex-wrap: wrap;
  padding: 12px;
  margin: 20px 0;
  //border: 1px solid rgba(75, 75, 75, 0.08);
  border-radius: 8px;
  box-shadow: 1px 2px 8px 6px rgba(75, 75, 75, 0.04);
}
</style>
